CSS Styling Methods in HTML

1. Inline CSS

Inline CSS is applied directly to an element using the style attribute.

Syntax

<h1 style="color: red;">Hello</h1>

This is inline styled text

2. Internal CSS

Internal CSS is defined inside a <style> tag within the <head> section.

Syntax

<head>
  <style>
    p { color: green; }
  </style>
</head>

This is an internally styled paragraph

3. External CSS

External CSS is stored in a separate file (e.g., style.css) and linked using the <link> tag.

Syntax

<head>
  <link rel="stylesheet" href="style.css">
</head>

4. @import CSS

@import is used to include external CSS inside another stylesheet or <style> block.

Syntax

@import url("style.css");

Comparison Table

Method Reusability Maintainability Use Case
Inline Low Poor Quick fixes
Internal Medium Good Single-page apps
External High Excellent Multi-page websites
@import Medium Moderate Modular organization
Use External CSS for best performance and cleaner code. Avoid too many Inline styles unless necessary!